<template>
  <div class="video-page">
    <Header />
    <van-sticky>
      <div class="nav-wrap">
        <van-tabs @click="tabChange" class="nav-tabs">
          <van-tab
            v-for="(item, index) in tabs"
            :title="item.name"
            :key="index"
          >
          </van-tab>
        </van-tabs>
        <div class="more-content">
          <img
            src="../../../assets/images/home/more.png"
            alt=""
            srcset=""
            class="more-img"
          />
        </div>
      </div>
    </van-sticky>
    <component :is="homeComponent"></component>
  </div>
</template>

<script>
import Header from "./homePage/smallComponents/header";
import SgVideo from "./videoPage/sgVideo";
import CloundVideo from "./videoPage/cloundVideo";
import LiveVideo from "./videoPage/liveVideo";
import ShouguangVideo from "./videoPage/shouguangVideo";
import CaiXiang from "./videoPage/caiXiang";

export default {
  name: "Video",
  components: {
    Header,
    SgVideo,
    CloundVideo,
    LiveVideo,
    ShouguangVideo,
    CaiXiang
  },
  data() {
    return {
      homeComponent: "SgVideo",
      tabs: [
        {
          name: "全部",
          components: "SgVideo"
        },
        {
          name: "云视频",
          components: "CloundVideo"
        },
        {
          name: "直播",
          components: "LiveVideo"
        },
        {
          name: "寿光新闻",
          components: "ShouguangVideo"
        },
        {
          name: "菜乡",
          components: "CaiXiang"
        }
      ]
    };
  },
  methods: {
    tabChange(index) {
      const item = this.tabs[index];
      this.homeComponent = item.components || "SgVideo";
    }
  },
  watch: {
    homeComponent() {
      if (
        document.body.scrollTop > 100 ||
        document.documentElement.scrollTop > 100
      ) {
        document.body.scrollTop = document.documentElement.scrollTop = 100;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.video-page {
  .nav-wrap {
    background: #ffffff;
    display: flex;
    .more-content {
      display: flex;
      align-items: center;
      padding: 6px;
      .more-img {
        height: 24px;
        width: 24px;
      }
    }
    .nav-tabs {
      flex: 1;
    }
  }
}
</style>
